<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket操作例子</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        h2 {
            color: #3498db;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 0;
        }
        .test-section {
            margin-bottom: 25px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #fafafa;
        }
        .test-section h3 {
            color: #2980b9;
            margin-top: 0;
            margin-bottom: 15px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }
        input, select, textarea, button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        input[type="text"], textarea, select {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        textarea {
            min-height: 80px;
            resize: vertical;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            cursor: pointer;
            padding: 10px 15px;
            font-size: 14px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-disconnected {
            background-color: #dc3545;
        }
        .status-connecting {
            background-color: #ffc107;
            animation: pulse 1s infinite;
        }
        .status-connected {
            background-color: #28a745;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        .message-box {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .message-item {
            margin-bottom: 8px;
            padding: 8px;
            border-radius: 4px;
        }
        .message-sent {
            background-color: #e3f2fd;
            text-align: right;
            margin-left: 20%;
        }
        .message-received {
            background-color: #e8f5e9;
            text-align: left;
            margin-right: 20%;
        }
        .message-system {
            background-color: #fff3cd;
            text-align: center;
            font-style: italic;
            margin-left: 10%;
            margin-right: 10%;
        }
        .message-time {
            font-size: 11px;
            color: #6c757d;
            margin-bottom: 4px;
        }
        .connection-status {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .control-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        .control-buttons button {
            flex: 1;
            min-width: 120px;
        }
        .info-box {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 4px;
            margin-top: 15px;
            font-size: 14px;
        }
        .warning {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 10px;
            margin-bottom: 15px;
        }
        .config-section {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            border-left: 4px solid #17a2b8;
        }
        .config-item {
            margin-bottom: 10px;
        }
        .config-item label {
            display: inline-block;
            width: 150px;
        }
        .config-item input {
            width: calc(100% - 160px);
            display: inline-block;
        }
        .success-button {
            background-color: #28a745;
        }
        .success-button:hover {
            background-color: #218838;
        }
        .danger-button {
            background-color: #dc3545;
        }
        .danger-button:hover {
            background-color: #c82333;
        }
        .warning-button {
            background-color: #ffc107;
            color: #212529;
        }
        .warning-button:hover {
            background-color: #e0a800;
        }
        .test-case {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }
        .test-case h4 {
            margin-top: 0;
            color: #495057;
        }
        .test-result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            min-height: 30px;
        }
        @media (max-width: 768px) {
            .control-buttons {
                flex-direction: column;
            }
            .config-item label {
                width: 100%;
                display: block;
            }
            .config-item input {
                width: 100%;
            }
            .message-sent,
            .message-received {
                margin-left: 5%;
                margin-right: 5%;
            }
        }
    </style>
</head>
<body>
    <h1>WebSocket操作例子</h1>
    
    <div class="container">
        <h2>WebSocket连接控制</h2>
        
        <div class="config-section">
            <h3>连接配置</h3>
            <div class="input-group">
                <label for="websocket-url">WebSocket服务器URL：</label>
                <input type="text" id="websocket-url" value="wss://ws.postman-echo.com/raw" placeholder="wss://example.com">
            </div>
            <div class="warning">
                <strong>提示：</strong> 正在使用Postman的公开WebSocket Echo服务，该服务会原样返回您发送的任何消息。
            </div>
            
            <div class="connection-status">
                <div>
                    <span class="status-indicator status-disconnected" id="status-indicator"></span>
                    <span id="connection-status-text">未连接</span>
                </div>
                <div id="connection-info">
                    连接时间：--
                </div>
            </div>
        </div>
        
        <div class="control-buttons">
            <button id="connect-btn" class="success-button">连接WebSocket</button>
            <button id="disconnect-btn" class="danger-button" disabled>断开连接</button>
            <button id="reconnect-btn" class="warning-button">重新连接</button>
        </div>
    </div>
    
    <div class="container">
        <h2>消息收发</h2>
        
        <div class="test-section">
            <h3>基本消息发送</h3>
            <textarea id="message-input" placeholder="输入要发送的消息...">Hello WebSocket!</textarea>
            <div class="control-buttons">
                <button id="send-text-btn">发送文本消息</button>
                <button id="send-json-btn">发送JSON消息</button>
                <button id="send-binary-btn">发送二进制数据</button>
            </div>
        </div>
        
        <div class="test-section">
            <h3>消息历史</h3>
            <div class="message-box" id="message-box">
                <!-- 消息将显示在这里 -->
            </div>
        </div>
    </div>
    
    <div class="container">
        <h2>高级功能测试</h2>
        
        <div class="test-case">
            <h4>1. 心跳机制</h4>
            <div class="config-item">
                <label>启用心跳：</label>
                <input type="checkbox" id="heartbeat-enabled" checked>
            </div>
            <div class="config-item">
                <label>心跳间隔(ms)：</label>
                <input type="number" id="heartbeat-interval" value="30000" min="1000">
            </div>
            <div class="config-item">
                <label>心跳消息：</label>
                <input type="text" id="heartbeat-message" value="ping">
            </div>
            <button id="apply-heartbeat-btn">应用心跳配置</button>
            <div class="test-result" id="heartbeat-result">心跳机制未配置</div>
        </div>
        
        <div class="test-case">
            <h4>2. 重连机制</h4>
            <div class="config-item">
                <label>重连间隔(ms)：</label>
                <input type="number" id="reconnect-interval" value="3000" min="500">
            </div>
            <div class="config-item">
                <label>最大重连次数：</label>
                <input type="number" id="max-reconnect-attempts" value="5" min="-1">
                <small>(-1表示无限重连)</small>
            </div>
            <button id="apply-reconnect-btn">应用重连配置</button>
            <div class="test-result" id="reconnect-result">重连配置未应用</div>
        </div>
        
        <div class="test-case">
            <h4>3. 连接状态监控</h4>
            <button id="check-status-btn">检查连接状态</button>
            <button id="get-buffer-btn">获取缓冲区大小</button>
            <div class="test-result" id="status-result">未检查状态</div>
        </div>
        
        <div class="test-case">
            <h4>4. 事件监听测试</h4>
            <div class="input-group">
                <label>选择事件：</label>
                <select id="event-select">
                    <option value="连接">连接事件</option>
                    <option value="消息">消息事件</option>
                    <option value="错误">错误事件</option>
                    <option value="关闭">关闭事件</option>
                    <option value="重连尝试">重连尝试事件</option>
                    <option value="发送">发送事件</option>
                </select>
            </div>
            <div class="control-buttons">
                <button id="add-listener-btn">添加监听器</button>
                <button id="remove-listener-btn">移除监听器</button>
                <button id="remove-all-listeners-btn">移除所有监听器</button>
            </div>
            <div class="test-result" id="listener-result">未操作监听器</div>
        </div>
    </div>
    
    <div class="container">
        <h2>链式调用示例</h2>
        
        <div class="test-section">
            <h3>高级WebSocket配置示例</h3>
            <pre>
// 链式调用示例代码
const ws = new WebSocket客户端('wss://ws.postman-echo.com/raw')
    .设置心跳配置({
        启用: true,
        间隔: 30000,
        消息: 'ping'
    })
    .设置重连配置({
        重连间隔: 5000,
        最大重连次数: 10
    })
    .监听('连接', (数据) => console.log('连接成功', 数据))
    .监听('消息', (数据) => console.log('收到消息', 数据))
    .监听('错误', (数据) => console.error('错误', 数据))
    .监听('关闭', (数据) => console.log('连接关闭', 数据))
    .监听('重连尝试', (数据) => console.log('重连尝试', 数据))
    .连接();
            </pre>
            <button id="run-chain-example-btn">运行链式调用示例</button>
            <div class="test-result" id="chain-example-result">示例未运行</div>
        </div>
    </div>
    
    <div class="container">
        <h2>工具函数测试</h2>
        
        <div class="test-section">
            <h3>静态工具函数</h3>
            <button id="check-support-btn">检查浏览器WebSocket支持</button>
            <div class="input-group">
                <label for="http-url">HTTP/HTTPS URL：</label>
                <input type="text" id="http-url" value="https://www.example.com" placeholder="http://或https://地址">
                <button id="convert-to-ws-btn">转换为WebSocket URL</button>
            </div>
            <div class="test-result" id="utils-result">未运行工具函数</div>
        </div>
    </div>

    <script type="module">
        // 导入WebSocket客户端类
        import WebSocket客户端 from '../../zh/前端/zh-websocket.js';
        
        // 全局WebSocket客户端实例
        let wsClient = null;
        let 连接时间 = null;
        let 自定义监听器 = null;
        
        // 更新状态指示器
        function 更新连接状态(状态码) {
            const 状态指示器 = document.getElementById('status-indicator');
            const 状态文本 = document.getElementById('connection-status-text');
            const 连接信息 = document.getElementById('connection-info');
            const 连接按钮 = document.getElementById('connect-btn');
            const 断开按钮 = document.getElementById('disconnect-btn');
            
            // 移除所有状态类
            状态指示器.className = 'status-indicator';
            
            switch (状态码) {
                case WebSocket.CONNECTING:
                    状态指示器.classList.add('status-connecting');
                    状态文本.textContent = '连接中...';
                    连接按钮.disabled = true;
                    断开按钮.disabled = false;
                    break;
                case WebSocket.OPEN:
                    状态指示器.classList.add('status-connected');
                    状态文本.textContent = '已连接';
                    连接时间 = new Date().toLocaleString();
                    连接信息.textContent = `连接时间：${连接时间}`;
                    连接按钮.disabled = true;
                    断开按钮.disabled = false;
                    添加系统消息('连接成功');
                    break;
                case WebSocket.CLOSING:
                    状态指示器.classList.add('status-disconnected');
                    状态文本.textContent = '关闭中...';
                    连接按钮.disabled = true;
                    断开按钮.disabled = true;
                    break;
                case WebSocket.CLOSED:
                    状态指示器.classList.add('status-disconnected');
                    状态文本.textContent = '未连接';
                    连接信息.textContent = '连接时间：--';
                    连接按钮.disabled = false;
                    断开按钮.disabled = true;
                    添加系统消息('连接已关闭');
                    break;
            }
        }
        
        // 添加消息到消息框
        function 添加消息(类型, 内容) {
            const 消息框 = document.getElementById('message-box');
            const 消息项 = document.createElement('div');
            const 时间元素 = document.createElement('div');
            const 内容元素 = document.createElement('div');
            
            时间元素.className = 'message-time';
            时间元素.textContent = new Date().toLocaleTimeString();
            
            内容元素.textContent = typeof 内容 === 'object' ? JSON.stringify(内容, null, 2) : 内容;
            
            消息项.appendChild(时间元素);
            消息项.appendChild(内容元素);
            
            if (类型 === '发送') {
                消息项.className = 'message-item message-sent';
            } else if (类型 === '接收') {
                消息项.className = 'message-item message-received';
            } else if (类型 === '系统') {
                消息项.className = 'message-item message-system';
            }
            
            消息框.appendChild(消息项);
            消息框.scrollTop = 消息框.scrollHeight;
        }
        
        // 添加系统消息
        function 添加系统消息(消息) {
            添加消息('系统', 消息);
        }
        
        // 显示结果到测试结果区域
        function 显示测试结果(元素Id, 内容) {
            const 结果元素 = document.getElementById(元素Id);
            结果元素.textContent = typeof 内容 === 'object' ? JSON.stringify(内容, null, 2) : 内容;
        }
        
        // 连接WebSocket
        document.getElementById('connect-btn').addEventListener('click', function() {
            const url = document.getElementById('websocket-url').value;
            if (!url) {
                添加系统消息('请输入WebSocket URL');
                return;
            }
            
            try {
                // 如果已有连接，先关闭
                if (wsClient) {
                    wsClient.关闭();
                }
                
                // 创建新的WebSocket客户端实例
                wsClient = new WebSocket客户端(url, {
                    心跳配置: {
                        启用: document.getElementById('heartbeat-enabled').checked,
                        间隔: parseInt(document.getElementById('heartbeat-interval').value),
                        消息: document.getElementById('heartbeat-message').value
                    },
                    重连间隔: parseInt(document.getElementById('reconnect-interval').value),
                    最大重连次数: parseInt(document.getElementById('max-reconnect-attempts').value)
                });
                
                // 添加事件监听
                wsClient
                    .监听('连接', (数据) => {
                        更新连接状态(WebSocket.OPEN);
                        console.log('WebSocket连接成功', 数据);
                    })
                    .监听('消息', (数据) => {
                        添加消息('接收', 数据.数据);
                        console.log('收到消息', 数据);
                    })
                    .监听('错误', (数据) => {
                        添加系统消息(`错误: ${数据.错误?.message || '未知错误'}`);
                        console.error('WebSocket错误', 数据);
                    })
                    .监听('关闭', (数据) => {
                        更新连接状态(WebSocket.CLOSED);
                        console.log('WebSocket连接关闭', 数据);
                    })
                    .监听('重连尝试', (数据) => {
                        添加系统消息(`重连尝试 ${数据.次数}`);
                        console.log('WebSocket重连尝试', 数据);
                    });
                
                // 开始连接
                wsClient.连接();
                更新连接状态(WebSocket.CONNECTING);
                添加系统消息('正在连接...');
            } catch (error) {
                添加系统消息(`连接失败: ${error.message}`);
                console.error('连接WebSocket失败', error);
            }
        });
        
        // 断开连接
        document.getElementById('disconnect-btn').addEventListener('click', function() {
            if (wsClient) {
                wsClient.关闭();
                添加系统消息('正在断开连接...');
            }
        });
        
        // 重新连接
        document.getElementById('reconnect-btn').addEventListener('click', function() {
            if (wsClient) {
                wsClient.重连();
                添加系统消息('正在重新连接...');
            } else {
                // 触发连接按钮的点击事件
                document.getElementById('connect-btn').click();
            }
        });
        
        // 发送文本消息
        document.getElementById('send-text-btn').addEventListener('click', function() {
            if (!wsClient || !wsClient.是否连接()) {
                添加系统消息('未连接，请先连接WebSocket');
                return;
            }
            
            const 消息 = document.getElementById('message-input').value;
            if (!消息) {
                添加系统消息('请输入消息内容');
                return;
            }
            
            wsClient.发送(消息);
            添加消息('发送', 消息);
        });
        
        // 发送JSON消息
        document.getElementById('send-json-btn').addEventListener('click', function() {
            if (!wsClient || !wsClient.是否连接()) {
                添加系统消息('未连接，请先连接WebSocket');
                return;
            }
            
            try {
                const 消息文本 = document.getElementById('message-input').value || '{"name": "测试", "value": 123}';
                
                // 尝试直接解析JSON
                let 消息对象;
                try {
                    消息对象 = JSON.parse(消息文本);
                } catch (parseError) {
                    // 如果解析失败，尝试将文本包装成JSON对象
                    添加系统消息('输入内容不是有效的JSON格式，已自动包装为文本消息对象');
                    消息对象 = { "text": 消息文本 };
                }
                
                wsClient.发送JSON(消息对象);
                添加消息('发送', 消息对象);
                添加系统消息('JSON消息已发送');
            } catch (error) {
                添加系统消息(`发送JSON消息失败: ${error.message}`);
            }
        });
        
        // 发送二进制数据
        document.getElementById('send-binary-btn').addEventListener('click', function() {
            if (!wsClient || !wsClient.是否连接()) {
                添加系统消息('未连接，请先连接WebSocket');
                return;
            }
            
            try {
                添加系统消息('准备发送二进制数据...');
                
                // 创建一个非常简单的二进制数据测试用例
                const 简单二进制数据 = new Uint8Array([0x48, 0x65, 0x6C, 0x6C, 0x6F]); // "Hello"的ASCII值
                
                // 获取消息文本
                const 消息文本 = document.getElementById('message-input').value || 'Hello';
                
                // 先进行基本检查
                if (wsClient.发送 && typeof wsClient.发送二进制 === 'function') {
                    try {
                        // 使用最简单的二进制格式，避免复杂的编码问题
                        添加系统消息('使用基本二进制数据格式');
                        
                        // 发送前再次确认连接状态
                        if (wsClient.获取状态() === WebSocket.OPEN) {
                            // 添加调试信息
                            console.log('WebSocket状态:', WebSocket.OPEN);
                            console.log('准备发送的二进制数据:', 简单二进制数据);
                            console.log('数据类型:', typeof 简单二进制数据);
                            console.log('数据构造函数:', 简单二进制数据.constructor.name);
                            
                            // 尝试直接发送Uint8Array
                            try {
                                wsClient.发送二进制(简单二进制数据);
                                添加消息('发送', `二进制数据 (${简单二进制数据.byteLength} 字节): [${Array.from(简单二进制数据)}]`);
                                添加系统消息('二进制消息已发送');
                                
                                // 添加缓冲区检查
                                setTimeout(() => {
                                    const 缓冲大小 = wsClient.获取缓冲大小();
                                    添加系统消息(`发送后缓冲区大小: ${缓冲大小} 字节`);
                                }, 100);
                            } catch (binaryError) {
                                添加系统消息(`二进制发送失败，尝试降级方案: ${binaryError.message}`);
                                console.error('二进制发送错误:', binaryError);
                                
                                // 降级方案1: 尝试发送ArrayBuffer
                                try {
                                    添加系统消息('尝试发送ArrayBuffer...');
                                    const buffer = 简单二进制数据.buffer;
                                    wsClient.发送二进制(buffer);
                                    添加消息('发送', `ArrayBuffer (${buffer.byteLength} 字节)`);
                                } catch (bufferError) {
                                    // 降级方案2: 发送文本消息
                                    添加系统消息('二进制发送完全失败，降级为文本消息');
                                    wsClient.发送(`[BINARY] ${消息文本}`);
                                    添加消息('发送', `[文本替代] ${消息文本}`);
                                }
                            }
                        } else {
                            添加系统消息('WebSocket连接未处于开放状态');
                        }
                    } catch (error) {
                        添加系统消息(`发送过程中出错: ${error.message}`);
                        console.error('发送错误:', error);
                    }
                } else {
                    添加系统消息('WebSocket客户端功能不完整');
                }
            } catch (error) {
                添加系统消息(`操作错误: ${error.message}`);
                console.error('严重错误:', error);
            }
        });
        
        // 应用心跳配置
        document.getElementById('apply-heartbeat-btn').addEventListener('click', function() {
            if (!wsClient) {
                显示测试结果('heartbeat-result', 'WebSocket未初始化');
                return;
            }
            
            const 配置 = {
                启用: document.getElementById('heartbeat-enabled').checked,
                间隔: parseInt(document.getElementById('heartbeat-interval').value),
                消息: document.getElementById('heartbeat-message').value
            };
            
            wsClient.设置心跳配置(配置);
            显示测试结果('heartbeat-result', `心跳配置已应用: ${JSON.stringify(配置)}`);
            添加系统消息(`心跳配置已更新: ${配置.启用 ? '已启用' : '已禁用'}`);
        });
        
        // 应用重连配置
        document.getElementById('apply-reconnect-btn').addEventListener('click', function() {
            if (!wsClient) {
                显示测试结果('reconnect-result', 'WebSocket未初始化');
                return;
            }
            
            const 配置 = {
                重连间隔: parseInt(document.getElementById('reconnect-interval').value),
                最大重连次数: parseInt(document.getElementById('max-reconnect-attempts').value)
            };
            
            wsClient.设置重连配置(配置);
            显示测试结果('reconnect-result', `重连配置已应用: ${JSON.stringify(配置)}`);
            添加系统消息(`重连配置已更新: 间隔 ${配置.重连间隔}ms, 最大次数 ${配置.最大重连次数}`);
        });
        
        // 检查连接状态
        document.getElementById('check-status-btn').addEventListener('click', function() {
            if (!wsClient) {
                显示测试结果('status-result', 'WebSocket未初始化');
                return;
            }
            
            const 状态码 = wsClient.获取状态();
            const 状态文本 = {
                [WebSocket.CONNECTING]: '连接中',
                [WebSocket.OPEN]: '已连接',
                [WebSocket.CLOSING]: '关闭中',
                [WebSocket.CLOSED]: '已关闭'
            }[状态码];
            
            const 状态信息 = {
                状态码: 状态码,
                状态文本: 状态文本,
                是否连接: wsClient.是否连接()
            };
            
            显示测试结果('status-result', 状态信息);
        });
        
        // 获取缓冲区大小
        document.getElementById('get-buffer-btn').addEventListener('click', function() {
            if (!wsClient) {
                显示测试结果('status-result', 'WebSocket未初始化');
                return;
            }
            
            const 缓冲大小 = wsClient.获取缓冲大小();
            显示测试结果('status-result', `缓冲区大小: ${缓冲大小} 字节`);
        });
        
        // 添加事件监听器
        document.getElementById('add-listener-btn').addEventListener('click', function() {
            if (!wsClient) {
                显示测试结果('listener-result', 'WebSocket未初始化');
                return;
            }
            
            const 事件名 = document.getElementById('event-select').value;
            
            // 移除之前的监听器（如果存在）
            if (自定义监听器) {
                wsClient.取消监听(事件名, 自定义监听器);
            }
            
            // 创建新的监听器
            自定义监听器 = (数据) => {
                console.log(`自定义${事件名}监听器触发`, 数据);
                添加系统消息(`自定义${事件名}事件触发`);
            };
            
            wsClient.监听(事件名, 自定义监听器);
            显示测试结果('listener-result', `已添加${事件名}事件的自定义监听器`);
        });
        
        // 移除事件监听器
        document.getElementById('remove-listener-btn').addEventListener('click', function() {
            if (!wsClient) {
                显示测试结果('listener-result', 'WebSocket未初始化');
                return;
            }
            
            const 事件名 = document.getElementById('event-select').value;
            
            if (自定义监听器) {
                wsClient.取消监听(事件名, 自定义监听器);
                自定义监听器 = null;
                显示测试结果('listener-result', `已移除${事件名}事件的自定义监听器`);
            } else {
                显示测试结果('listener-result', `没有添加${事件名}事件的自定义监听器`);
            }
        });
        
        // 移除所有事件监听器
        document.getElementById('remove-all-listeners-btn').addEventListener('click', function() {
            if (!wsClient) {
                显示测试结果('listener-result', 'WebSocket未初始化');
                return;
            }
            
            const 事件名 = document.getElementById('event-select').value;
            wsClient.取消监听(事件名);
            自定义监听器 = null;
            显示测试结果('listener-result', `已移除${事件名}事件的所有监听器`);
        });
        
        // 运行链式调用示例
        document.getElementById('run-chain-example-btn').addEventListener('click', function() {
            try {
                const url = document.getElementById('websocket-url').value;
                
                // 关闭现有连接
                if (wsClient) {
                    wsClient.关闭();
                }
                
                // 创建新的链式调用实例
                wsClient = new WebSocket客户端(url)
                    .设置心跳配置({
                        启用: true,
                        间隔: 30000,
                        消息: 'ping'
                    })
                    .设置重连配置({
                        重连间隔: 5000,
                        最大重连次数: 10
                    })
                    .监听('连接', (数据) => {
                        console.log('链式调用 - 连接成功', 数据);
                        添加系统消息('链式调用 - 连接成功');
                        更新连接状态(WebSocket.OPEN);
                    })
                    .监听('消息', (数据) => {
                        console.log('链式调用 - 收到消息', 数据);
                        添加消息('接收', data.数据);
                    })
                    .监听('错误', (数据) => {
                        console.error('链式调用 - 错误', 数据);
                        添加系统消息(`链式调用 - 错误: ${数据.错误?.message || '未知错误'}`);
                    })
                    .监听('关闭', (数据) => {
                        console.log('链式调用 - 连接关闭', 数据);
                        更新连接状态(WebSocket.CLOSED);
                    })
                    .监听('重连尝试', (数据) => {
                        console.log('链式调用 - 重连尝试', 数据);
                        添加系统消息(`链式调用 - 重连尝试 ${data.次数}`);
                    })
                    .连接();
                
                更新连接状态(WebSocket.CONNECTING);
                显示测试结果('chain-example-result', '链式调用示例已运行');
                添加系统消息('链式调用示例已执行');
            } catch (error) {
                显示测试结果('chain-example-result', `链式调用失败: ${error.message}`);
                console.error('链式调用失败', error);
            }
        });
        
        // 检查浏览器WebSocket支持
        document.getElementById('check-support-btn').addEventListener('click', function() {
            const 支持 = WebSocket客户端.是否支持();
            显示测试结果('utils-result', `浏览器${支持 ? '支持' : '不支持'}WebSocket`);
        });
        
        // 转换为WebSocket URL
        document.getElementById('convert-to-ws-btn').addEventListener('click', function() {
            const httpUrl = document.getElementById('http-url').value;
            if (!httpUrl) {
                显示测试结果('utils-result', '请输入HTTP/HTTPS URL');
                return;
            }
            
            try {
                const wsUrl = WebSocket客户端.创建安全URL(httpUrl);
                显示测试结果('utils-result', `转换结果: ${wsUrl}`);
            } catch (error) {
                显示测试结果('utils-result', `转换失败: ${error.message}`);
            }
        });
        
        // 页面加载时检查浏览器支持
        window.addEventListener('load', function() {
            if (!WebSocket客户端.是否支持()) {
                alert('您的浏览器不支持WebSocket，请更新浏览器版本！');
            }
        });
        
        // 页面关闭时关闭连接
        window.addEventListener('beforeunload', function() {
            if (wsClient) {
                wsClient.关闭();
            }
        });
        
        // 暴露到全局以避免ReferenceError
        window.WebSocket客户端 = WebSocket客户端;
        window.更新连接状态 = 更新连接状态;
        window.添加消息 = 添加消息;
        window.添加系统消息 = 添加系统消息;
        window.显示测试结果 = 显示测试结果;
    </script>
</body>
</html>